<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click='$router.push("/home")'>首页</button>
        <button @click='$router.push("/news")'>新闻</button>
        <button @click='$router.push("/about")'>关于</button>
        <router-view></router-view>
    </div>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
  }
    const home={
        template:`
            <div>
                我是home页    
            </div>
        
        `
    };
    const news={
        template:`
            <div>
                我是mews页    
            </div>
        
        `,
        beforeRouteEnter(to, from, next) {
            if(confirm('确定进入吗')){
                next()
            }
        },
        // beforeRouterEnter(to,form,next){
            
        // },
        beforeRouteLeave(to,from,next){
            if(confirm('确定离开吗')){
                next()
            }
        }
        
    };
    const about={
        template:`
            <div>
                我是about页    
            </div>
        
        `,

    };
    const login={
        template:`
            <div>
                <span>这是注册页</span>
                  
            </div>
        `,
        
    }
    const router=new VueRouter({
        routes:[
            {
                path:'/',
                redirect:'/home'
            },
            {
                path:'/home',
                component:home
            },
            {
                path:'/news',
                component:news,
                
            },
            {
                path:'/about',
                component:about
            },
            {
                path:'/login',
                component:login
            }
        ]
    })
    
    const vm=new Vue({
        el:'#app',
        router
    })
</script>
</html>